<script type="text/javascript" src="<?php echo base_url() . 'js/jquery/jquery.autocomplete.js'; ?>"></script>
<style type="text/css">@import url("<?php echo base_url() . 'css/jquery/jquery.autocomplete.css'; ?>");</style>
<script type="text/javascript">
    var i=0;
    var total=0;
    function removeMe(el) {
	if(i>0){
            var parent = el.parentNode.parentNode;
            parent.parentNode.removeChild(parent);
            i--;
            //$total-=$()
        }
    }

    $(document).ready(function(){
        
        $('#addElement').click(function(){
            //$('#detailTable').append("<tr id=hapus><td><input name=nama[] class=barang></td><td><input name=jumlah[]></td><td><input name=hargaBeli[]></td><td><input type=button value='Remove' onclick=removeMe(this) class='remove'></td></tr>");
            if($('#nama_barang').val()=='' || $('#jumlah').val()=='' || $('#harga_beli').val()==''){
                alert("Semua Form harus diisi");
            }else{
                var jumlah=$('#harga_beli_text').val()*$('#jumlah_text').val();
                $('#detailTable').append("<tr><td>"+$('#nama_barang').val()+"</td>\n\
                         <td>"+$('#jumlah_text').val()+"</td>\n\
                         <td>"+$('#harga_beli_text').val()+"</td>\n\
                         <td>"+jumlah+"</td>\n\
                         <td><input type=button value='Remove' onclick=removeMe(this) class='remove'>\n\
                         <input type=hidden name='id_barang[]' value='"+$('#id_barang_text').val()+"'>\n\
                         <input type=hidden name='harga_beli[]' value='"+$('#harga_beli_text').val()+"'>\n\
                         <input type=hidden name='jml[]' value='"+$('#jumlah_text').val()+"'>\n\
</td>\n\
                    </tr>");
                i++;
                $('#nama_barang').val('');
                $('#kategori_text').val('');
                $('#harga_beli_text').val('');
                $('#jumlah_text').val('');
                total+=jumlah;
                $('#totalLabel').text(total);
            }

        });
    });

    $().ready(function(){
         $('#nama_barang').autocomplete('<?=  site_url("barang/getAutocomplateData")?>'+'/'+$("#nama_barang").val(),
			{
				parse: function(data){
					var parsed = [];
					for (var i=0; i < data.length; i++) {
                                                parsed[i] = {
							data: data[i],
							value: data[i].nama_barang // nama field yang dicari
						};
					}
					return parsed;
				},
				formatItem: function(data,i,max){
					return "<div>"+data.nama_barang+"</div>";
				},
                                width: 270, // panjang tampilan pencarian autocomplete yang akan muncul di bawah textbox pencarian
				dataType: 'json' // tipe data yang diterima oleh library ini disetup sebagai JSON
			}
	).result( // fungsi ini akan dipanggil setelah user memilih salah satu result pencarian autocomplete
			function(event,data,formated){
                            $('#nama_barang').val(data.nama_barang);
                            $('#id_barang_text').val(data.id_barang);
                            $('#kategori_text').val(data.nama_kategori);
                            $('#harga_beli_text').val(data.harga_pokok);
			}
	);
    })
</script>
<?php
$distributorOption=array();
foreach ($listDistributor as $distributor){
    $distributorOption[$distributor->id_distributor]=$distributor->nama;
}
$distributorListOption=form_dropdown('id_distributor', $distributorOption);
$id_pembelian=Date('U');
?>
<?=form_open($subLink)?>
<fieldset><legend>Transaksi Pembelian</legend>
    <table>
        <tr>
            <td width="100">ID Transaksi</td>
            <td>
                <?=  form_input('id_pembelian_text', $id_pembelian,'disabled')?>
                <?=  form_hidden('id_pembelian',$id_pembelian)?>
            </td>
        </tr>
        <tr>
            <td>Tanggal</td>
            <td><?=form_input('tanggal_pembelian', Date('d/m/Y'),'disabled')?></td>
        </tr>
        <tr>
            <td>Distributor</td>
            <td><?=$distributorListOption?></td>
        </tr>
        <tr>
            <td valign="bottom">Keterangan</td>
            <td><textarea name="keterangan" cols="50" rows="6"></textarea></td>
        </tr>
    </table>
</fieldset>
<fieldset><legend>Detail Transaksi</legend>
    <table>
        <tr>
            <td width="150">Nama Barang</td>
            <td>
                <input name=nama type="text" id="nama_barang">
                <input type="hidden" name="id_barang_text" id="id_barang_text">
            </td>
        </tr>
        <tr>
            <td>Kategori Barang</td>
            <td><input name=kategori id="kategori_text" disabled></td>
        </tr>
        <tr>
            <td>Jumlah Barang</td>
            <td><input name=jumlah id="jumlah_text"></td>
        </tr>
        <tr>
            <td>Harga Beli</td>
            <td><input name="harga_beli" id="harga_beli_text"></td>
        </tr>
    </table>
    <?=  form_button('btn', 'Tambah', 'id=addElement')?>

    <table class="table-main" id="detailTable">
        <tr>
            <th>Nama Barang</th>
            <th>Harga Beli</th>
            <th>Jumlah</th>
            <th>Total</th>
            <th>Aksi</th>
        </tr>
    </table>
    JUMLAH YANG HARUS DIBAYAR: <label id="totalLabel"></label><br>
    <input type="submit" value="Proses" onClick="return confirm('Apakah data yang anda masukkan sudah benar?')">
</fieldset>
<?=  form_close()?>